#header
  display: flex
  justify-content: center
  width: 100%
  height: 40px
  background-color: #333
  .center
    width: 1226px
    height: 40px
    flex-shrink: 0
    display: flex
    justify-content: space-between
    align-items: center
    ul
      li
        a
          display: flex
          align-items: center
          height: 12px
          font-size: 12px
          color: #b0b0b0
          padding: 0 8px
          border-right: 1px solid #b0b0b0

        &:last-of-type
          a
            border-right: none
    .fl
      flex-shrink: 0
      display: flex
      width: 612px
    .fr
      display: flex
      height: 40px
      .user
        width: 120px
        height: 40px
        line-height 40px
        font-size 12px
        text-align: center
        position relative
        &:hover
          .username
            color:#ff6700
            background-color: #fff
          .selector
            padding: 7px 0
            height 120px
        .username
          display: block
          width: 100%
          height: 100%
          line-height: 40px
          color: #b0b0b0
          position relative
          z-index 201
        .selector
          position absolute
          left 0
          top 40px
          width: 100%
          z-index 200
          box-shadow 0 2px 10px rgba(0,0,0,0.15)
          height: 0
          background-color: #fff
          overflow hidden
          transition all 0.2s
          li
            width 100%
            height 30px
            &:hover
              a
                color:#ff6700
                background-color: #fafafa
            a
              display: block
              width 100%
              height 100%
              line-height: 30px
              padding: 0
              border 0

      >ul
        display: flex
        align-items: center
        height: 100%
      .shopcart
        display: flex
        width: 120px
        font-size: 12px
        color: #fff
        margin: 0 20px
        justify-content: center
        align-items: center
        background-color: #ff6700



#nav
  width: 100%
  height: 100px
  flex-shrink: 0
  position relative
  .banner_x
    width: 1226px
    height: 100%
    display flex
    & > a
      display: block
      height: 100%
    .logo
      width: 50px
      text-indent: -10000px
      background: url("../image/nav/logo_top.png") no-repeat
      background-size: 100%
      background-position: center

    .gif
      width: 180px
      background: url("../image/nav/yyymix.gif") no-repeat
      background-size: 100%
      background-position: center

    .list
      display: flex
      height: 100%
      & > li
        display: flex
        align-items: center
        margin: 0 10px
        font-size: 16px
        &:hover
          a
            color: #ff6700

    .fr
      display: flex
      justify-content flex-end
      align-items: center
      height: 100%
      flex-grow 1
      .button
        box-sizing: border-box
        width: 50px
        height: 50px
        background-color: #fff
        border: 1px solid #ccc
        text-align: center
        line-height: 50px
        font-size: 18px
        font-weight: bold
        cursor: pointer
        &:active
          background-color: #ff6700
          color: #fff
      .search
        position relative
        .text
          box-sizing: border-box
          width: 250px
          height: 50px
          border: 1px solid #ccc
          padding: 0 10px
          &:focus
            outline: none
            border 1px solid #ff6700
            ~ .keyword_list
              display: block
        .search_hot
          position absolute
          top: 16px
          right: 12px
          a
            float left
            display block
            font-size 12px
            height 18px
            line-height 18px
            margin-left 5px
            padding 0 5px
            background-color: #eee
            color #757575
            transition all .2s
            &:hover
              color #fff
              background-color: #ff6700
        .keyword_list
          display none
          position absolute
          top: 50px
          left: 0
          z-index 100
          width 250px
          box-sizing border-box
          border 1px solid #ff6700
          li
            position relative
            box-sizing border-box
            width: 100%
            height 30px
            padding 6px 15px
            background-color: #fff
            &:hover
              background-color: #fafafa
            a
              display block
              width 100%
              height 100%
              font-size 12px
              .result
                float: right
                color: #b0b0b0


#personal {
  width: 100%;
  height: auto;
  background: rgb(245,245,245);
  padding-bottom: 20px;
  padding-top: 20px;
  .selfinfo {
    width: 1226px;
    .lfnav {
      width: 234px;
      height: 500px;
      background: #fff;
      .ddzx {
        width: 234px;
        height: 40px;
        line-height: 40px;
        font-size: 19px;
        margin: 30px 20px 10px 40px;
        color: rgb(51,51,51);
      }
      .subddzx {
        ul {
          li {
            display: block;
            width: 194px;
            height: 40px;
            line-height: 40px;
            padding-left: 40px;
            a {
              color: rgb(117,117,117);
              &:hover {
                color: rgb(51,51,51);
              }
            }
          }
        }
      }
    }
    .rtcont {
      width: 978px;
      height: 500px;
      background: #fff;
      .grzlbt {
        width: 938px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        color: rgb(117,117,117);
      }
      .subgrzl {
        height: 45px;
        line-height: 45px;
        width: 900px;
        background: rgb(253,253,253);
        border: 1px solid #aaa;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
        span {
          &:nth-of-type(1) {
            display: inline-block;
            font-size: 15px;
            font-weight: bold;
            color: rgb(117,117,117);
            width: 70px;
            height: 45px;
            line-height: 45px;
            padding-left: 20px;
          }
          &:nth-of-type(2) {
            display: inline-block;
            font-size: 15px;
            color: rgb(117,117,117);
            width: 480px;
            height: 45px;
            line-height: 45px;
            padding-left: 120px;
          }
          &:nth-of-type(3) {
            display: inline-block;
            font-size: 15px;
            width: 160px;
            height: 45px;
            line-height: 45px;
            text-align: right;
          }
          a {
            color: teal;
            &:hover {
              color: #ff6700;
            }
          }
        }
      }
    }
  }
}

#footer
  display: flex
  flex-direction: column
  justify-content: flex-end
  align-items: center
  height: 120px
  margin-top: 20px
  padding: 30px 0
  font-size: 12px
  p
    height: 30px